<template>
  <div class="mangerbox">
    <div class="mian">
        <div class="s_header">
            <div class="s_sch">
                <el-input placeholder="音乐/视频/用户" v-model="search" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <div class="s_nav">
            <ul>
                <li><router-link to="/single">单曲</router-link></li>
                <li><router-link to="/single">歌手</router-link></li>
                <li><router-link to="/album">专辑</router-link></li>
                <li><router-link to="">MV</router-link></li>
                <li><router-link to="">歌单</router-link></li>
                <li><router-link to="">用户</router-link></li>
            </ul>
        </div>
        <div class="s_content">
            <router-view></router-view>
        </div> 
    </div>
  </div>
</template>

<script>
export default {
data() {
    return {
      search: '',
    }
  }
}
</script>

<style>
/* 搜索栏 */
.s_header{
    height: 200px;
    background-color: aliceblue;
}
.s_sch{
    margin: auto;
    line-height: 200px;
    width: 400px;
}
.el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
/* 导航 */
.s_nav{
width: 100%;
height: 40px;
}
.s_nav ul li{
    height: 40px;
    line-height: 40px;
    float: left;
    margin-right: 20px;
}
.s_content{
   width: 100%;
}
</style>